<template>
	<view class="container">
		<view class="header">
			<!-- <text class="title">博客</text> -->
			<view class="nav">
				<ul class="navbar-list">
					<li class="navbar-item active"><a href="#" class="navbar-link">首页</a></li>
					<li class="navbar"><a href="#">科技</a></li>
					<li class="navbar"><a href="#">生活</a></li>
					<li class="navbar"><a href="#">家居</a></li>
				</ul>
			</view>
		</view>
		<view class="detail-middle">
			<text class="detail-middle-title">拆解阿里2021年财报，一条主线三个点</text>
			<view>
				<text class="middle-message">7人评论/发布时间：2021-07-20 09：13</text>
				<image class="zan" :src="Zan"></image>
			</view>
			<view class="detail-middle-article">
				<view class="article-comments-img">
					<image src="https://img.36krcdn.com/20210516/v2_397b59bf8d8f4257ab7038df86d11c69_img_png"></image>
				</view>
				<text class="middle-article-content">
					拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点拆解阿里2021年财报，一条主线三个点2021年第四季度实现营业收入1874亿元，同比增长64%；调整EBITDA为299亿元，同比增长18%；实现归属股东的Non-GAAP净利润为262亿元，同比增长18%。截至2021年3月中国零售市场移动月活用户数达到9.25亿，活跃买家数增速回升。
					&nbsp;&nbsp;“这些成绩建立于我们为消费者和商家提供的清晰价值之上。”
					&nbsp;&nbsp;&nbsp;&nbsp;阿里巴巴集团董事会主席兼首席执行官张勇说，“得益于生活及工作等各方面均在加速数字化，我们对中国消费驱动的经济增长充满期待。我们将继续聚焦用户体验，专注于通过创新创造客户价值，从而实践在数字时代让天下没有难做的生意之使命。
				</text>
			</view>
		</view>
		<view class="detail-middle-comment">
			<form>
				<view  class="detail-article-comment">
				<textarea class="article-comment" placeholder="说点什么..." ></textarea>
				<button>发表</button>
				</view>
			</form>
			<view class="detail-comments">
				
				<text class="comments-title">全部评论</text>
				<view class="comments">
					<view>		
						<image class="comments-img" :src="Image"></image>
					</view>
					<view class="comments-message">
						<view>
							<view class="comments-nickname">迪丽热巴</view>
							<view class="comments-time">2021-07-19 10:26</view>
						</view>
						<view>
							<text class="comments-content">666太棒了</text>
						</view>
					</view>
				</view>
				<view class="comments">
					<view>		
						<image class="comments-img" :src="Image"></image>
					</view>
					<view class="comments-message">
						<view>
							<view class="comments-nickname">迪丽热巴</view>
							<view class="comments-time">2021-07-19 10:26</view>
						</view>
						<view>
							<text class="comments-content">666太棒了</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Image from "../img/portrait.png"
	import Zan from "../img/zan.png"
	import Taoxin from "../img/taoxin.png"
	export default {
		name: "detail",
		data:function(){
			return{
				Image:Image,
				Zan:Zan,
				Taoxin:Taoxin
			}
		}
	}
</script>

<style>
	.detail-middle {
		margin-top: 5px;
		background-color: white;
		width: 100%;
	}

	.detail-middle-title {
		padding-top: 15px;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 20px;
		font-weight: bold;
		display: inline-block;
	}
	.zan{
		width: 20px;
		height: 20px;
		margin-top: 5px;
	}
	.middle-message {
		padding-top: 10px;
		padding-left: 30px;
		padding-right: 30rpx;
		font-size: 14px;
		display: inline-block;
	}
	.detail-middle-article{
		padding-top: 10px;
		padding-bottom: 20px;
		font-size: 13px;
	}
	.article-comments-img{
		margin-left: 25px;
		margin-right: 25px;
	}
	.middle-article-content{
		margin-top: 10px;
		margin-left: 25px;
		margin-right: 25px;
		display: inline-block;
		
	}
	text{
		text-indent: 15px;/* 文字首行缩进两格 */
	}
	/* 评论 */
	.detail-middle-comment{
		margin-top: 10px;
		background-color: white;
		width: 100%;
	}
	.detail-article-comment{
		padding-top: 15px;
	}
	.article-comment{
		border: 1px solid #CCCCCC;
		margin-left: 30px;
		height: 100px;
	}
	button{
		width: 70px;
		background-color: #007AFF;
		color: white;
		border: none;
		margin-top: 5px;
	}
	.comments{
		position: relative;
		border-bottom: 1px solid #C0C0C0;
		margin-left: 30px;
		margin-right: 30rpx;
		padding-bottom: 5px;
	}
	.comments-title{
		font-size: 20px;
		font-weight: 500;
		margin-left: 30px;
		display: inline-block;
	}
	.comments-img{
		width: 60px;
		height: 60px;
		margin-top: 20px;
		margin-left: 10px;
		float: left;
		border-radius: 50%;
	}
	.comments-message{
		padding-top: 20px;
		padding-left: 10px;
		display: inline-block;
		font-size: 12px;
	}
	.comments-nickname{
		float: left;
		width: 70px;
	}
	.comments-time{
		width: 200px;
		float: left;
	}
	.comments-content{
		padding-top: 15px;
		padding-bottom: 15px;
		display: inline-block;
	}
	/* 如果屏幕宽小于410 */
	@media screen and (max-width:410px) {
		.comments{
			position: relative;
			border-bottom: 1px solid #C0C0C0;
			margin-left: 15px;
			margin-right: 30rpx;
		}
		.comments-img{
			width: 50px;
			height: 50px;
			margin-top: 20px;
			float: left;
			border-radius: 50%;
			display: inline-block;
		}
		.comments-message{
			padding-top: 20px;
			padding-left: 10px;
			display: inline-block;
			font-size: 17px;
		}
		.comments-nickname{
			float: left;
			width: 55px;
		}
		.comments-time{
			width: 230px;
			float: left;
		}
		.comments-content{
			padding-top: 15px;
			padding-bottom: 15px;
			display: inline-block;
		}
	}
	/* 如果屏幕宽小于366 */
	@media screen and (max-width:366px) {
		.comments{
			position: relative;
			border-bottom: 1px solid #C0C0C0;
			margin-left: 15px;
			margin-right: 30rpx;
		}
		.comments-img{
			width: 40px;
			height: 40px;
			margin-top: 20px;
			float: left;
			border-radius: 50%;
			display: inline-block;
		}
		.comments-message{
			padding-top: 20px;
			padding-left: 10px;
			display: inline-block;
			font-size: 15px;
		}
		.comments-nickname{
			float: left;
			width: 65px;
		}
		.comments-time{
			width: 200px;
			float: left;
		}
		.comments-content{
			padding-top: 15px;
			padding-bottom: 15px;
			display: inline-block;
		}
	}
</style>
